{% load i18n %}
<style>
.cate-info {
    overflow: inherit;;
    height: 35px;
    float: left;
}
.cate-info li.cate-li{
    float: left;
    cursor: pointer;
    padding: 0 37px;
    margin: 0 -1px -1px 0;
    height: 34px;
    line-height: 34px;
    border: 1px solid #e6e6e6;
    color: #B2B2B2;
    font-size: 14px;
    position: relative;
    z-index: 98;
    background: #fff;
}
.cate-info li.cur{
    background: #f9f9f9;
    color: #e8b342;
    //color: black;
    font-weight: bold;
    border-bottom-color: #fff;
}
</style>
<script>
    $(document).ready(function() {
        init_middle_collapse()
    })
    function init_middle_collapse() {
        // 开启
        $(function () {
            $('.panel-collapse').on('show.bs.collapse', function () {
                var id =  $(this).attr('id');
                var key = "#" + id + "_arrow"
                var e = $(key)
                //console.log("open key %s" , e.html())
                e.html("<i class=\"fa fa-chevron-down\"></i>")
                console.log("open  "  + id)

            }
            );
        })
        // 关闭
        $(function () {
            $('.panel-collapse').on('hidden.bs.collapse', function () {
                var id =  $(this).attr('id');
                var key = "#" + id + "_arrow"
                var e = $(key)
                e.html("<i class=\"fa fa-chevron-right\"></i>")
                console.log("hidden  "  + id)
            }
            );
        })
        // my order 他的开始
        $(function () {
            $('#get_curr_order').on('show.bs.collapse', function () {
                console.log("get order list ")
                get_order_list();
            });
        })
        $(function () {
            $('#get_order_history').on('show.bs.collapse', function () {
                get_order_history();
            });
        })
        $(function () {
            $('#get_balance').on('show.bs.collapse', function () {
                get_balances();
            });
        })

        {% if user.is_authenticated %}
            get_balances()
        {% endif %}

    }
</script>

<div class="col-md-12 f-pz">
    <div class="trade_kline">
        <iframe id="tradingview" name="tradingview" src="{% url 'tradeview_index'%}?symbol={{coin0}}_{{coin1}}" frameborder="0" allowtransparency="true" scrolling="no" allowfullscreen="" style="display: block; width: 100%; height: 400px;"></iframe>
        <!--
        <img width="100%" src="/static/images/test/kpng.png"/>
        -->
    </div>
</div>


<div class="col-md-12 f-pz">
    <div class="markets-table f-pz ">
        <div class="markets-cate">
            <ul class="cate-info" style="margin-bottom:0px">
                <li id="trade_market" class="cate-li cur" data-curMarket="limit" onclick="init_trade_form('market')">{% trans '市价交易' %}</li>
                <li id="trade_limit" class="cate-li" data-curMarket="market" onclick="init_trade_form('limit')">{% trans '限价交易' %}</li>
            </ul>
        </div>
        <div class="table-content f-pz ">
            <!--  -->
            <div class="col-md-12 f-pz">
                <div class="col-md-6 f-pz col-xs-12">
                    <div class="trade_form_fl">
                        {% include './buy.html' %}
                        {% include './buy_market.html' %}
                    </div>
                </div>
                <div class="col-md-6 f-pz col-xs-12">
                    <div class="trade_form_fr">
                        {% include './sell.html' %}
                        {% include './sell_market.html' %}
                    </div>
                </div>
            </div>
            <!--  -->
        </div>
    </div>

</div>

<div class="col-md-12 f-pz">
    <div class="panel-group trade_order" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion"
                        href="#get_curr_order">
                        <span id="get_curr_order_arrow" class="green" ><i class="fa fa-chevron-down"></i> </span>{% trans '当前委托' %}
                    </a>
                </h4>
            </div>
            <div id="get_curr_order" class="panel-collapse collapse in">
                <div class="panel-body f-pz">
                    <div id="order_list"></div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion"
                        href="#get_order_history">
                        <span id="get_order_history_arrow" class="green" ><i class="fa fa-chevron-right"></i> </span>{% trans '历史委托' %}
                    </a>
                </h4>
            </div>
            <div id="get_order_history" class="panel-collapse collapse">
                <div class="panel-body f-pz">
                    <div id="history_order"> </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion"
                        href="#get_balances">
                        <span id="get_balances_arrow" class="green" ><i class="fa fa-chevron-right"></i> </span>{% trans '我的资产' %}
                    </a>
                </h4>
            </div>
            <div id="get_balances" class="panel-collapse collapse">
                <div class="panel-body f-pz">
                    <div id="balances"> </div>
                </div>
            </div>
        </div>
    </div>
</div>
